<template>
  <div class="box" v-show="myIsShow" ref="box">
    <div class="cont">
      <slot>
        <p>{{ title }}</p>
        <input type="button" @click="closeFn" value="关闭" v-if="isCloseBtn">
      </slot>
    </div>
  </div>
  <!-- QfDialog组件的attribute： -->
  <!-- title：未传插槽内容时的提示框信息 -->
  <!-- isShow：是否显示提示框 -->
  <!-- closeDelay：自动关闭提示框时的延迟时间，如果为0，不自动关闭 -->
  <!-- isCloseBtn：是否需要显示关闭按钮 -->
  <!-- isCloseMask：是否需要点击遮罩层关闭 -->
  
  <!-- QfDialog组件的Event -->
  <!-- dialogClose：提示框关闭时会触发的事件。事件处理函数的参数为当前提示框的显示状态 -->

  <!-- QfDialog组件的slot -->
  <!-- 默认插槽，插槽内容会覆盖提示框信息 -->
</template>

<script setup>
import { ref, watch } from 'vue';
// 接收父组件传入的自定义事件
const emits = defineEmits(["dialogClose"]);
// 接收父组件传入的数据
const props = defineProps({
  title: {
    default: "提示框"
  },
  isShow: {
    default: false
  },
  closeDelay: {},
  isCloseBtn:{
    default: true
  },
  isCloseMask:{
    default: true
  }
});

// 根据父组件传入的状态，决定当前提示框是否显示
const myIsShow = ref(props.isShow);

// 获取遮罩层的响应式数据
const box = ref(null);

let t;
watch(()=>props.isShow, (v)=>{
  myIsShow.value = props.isShow;
  if(!v) return;
  // 关闭方式：自动关闭
  if(props.closeDelay){
    clearTimeout(t);
    t = setTimeout(()=>{
      myIsShow.value = false;
      emits("dialogClose", false);
    }, props.closeDelay)
  }else{
    clearTimeout(t);
  }
  // 关闭方式：点击遮罩层关闭
  if(props.isCloseMask){
    box.value.onclick = closeFn;
  }else{
    box.value.onclick = null;
  }
  // 关闭方式：点击按钮关闭的事件，直接添加到按钮上，只要根据参数决定按钮的显示与否即可
})

// 点击关闭的处理函数
function closeFn(){
  myIsShow.value = false;
  clearTimeout(t);
  emits("dialogClose", false);
}


</script>

<style scoped>
.box{
  position: fixed;
  left:0;right:0;top:0;bottom:0;
  background: rgba(200,200,200,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .cont{
  margin: auto;
  background: #fff;
  text-align: center;
  padding: 20px;
}
</style>